<template>
  <el-button plain @click="dialogOpenVisible"> 添加 </el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" width="50" label="序号" />
    <el-table-column prop="productName" label="商品名称" />
    <el-table-column prop="productionBatch" label="生产批次" />
    <el-table-column prop="shelfLife" label="保质期(天)" />
    <el-table-column prop="licenseNumber" label="生产许可证" />
    <el-table-column prop="enterprise" label="生产企业" />
    <el-table-column prop="creator" label="创建人" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column prop="updator" label="修改人" />
    <el-table-column label="操作" width="200">
      <template #default="{row}">
        <el-button type="warning" @click="open(row)">修改</el-button>
        <el-button type="danger" @click="shanchu(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="cha.PageIndex"
          v-model:page-size="cha.PageSize"
          :page-sizes="[2, 5, 7, 9]"
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          layout="total, sizes, slot"
          :total="cha.TotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <span
            >，共{{ cha.TotalCount }}条数据，每页显示{{ cha.PageIndex }}/{{
              cha.TotalPage
            }}页</span
          >
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="cha.PageIndex"
          v-model:page-size="cha.PageSize"
          :page-sizes="[2, 5, 7, 9]"
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          layout="  prev, pager, next, slot"
          :total="cha.TotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <button
            class="btn-prev"
            :disabled="cha.PageIndex == 1"
            @click="handleCurrentChange(1)"
          >
            首页
          </button>
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="cha.PageIndex"
          v-model:page-size="cha.PageSize"
          :page-sizes="[2, 5, 7, 9]"
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          layout="slot, jumper"
          :total="cha.TotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <button
            class="btn-prev"
            :disabled="cha.PageIndex == cha.TotalPage"
            @click="handleCurrentChange(cha.TotalPage)"
          >
            尾页
          </button>
        </el-pagination>
      </td>
    </tr>
  </table>

  <!-- 添加-编辑 -->
  <el-dialog v-model="dialogFormVisible" width="500">
    <el-form :model="form">
      <el-form-item label="商品名称">
        <el-input v-model="form.productName" />
      </el-form-item>
      <el-form-item label="商品批次">
        <el-input v-model="form.productionBatch" />
      </el-form-item>
      <el-form-item label="保质期(天)">
        <el-input v-model="form.shelfLife" />
      </el-form-item>
      <el-form-item label="生产许可证号">
        <el-input v-model="form.licenseNumber" />
      </el-form-item>
      <el-form-item label="生产企业">
        <el-input v-model="form.enterprise" />
      </el-form-item>
      <el-form-item label="创建人">
        <el-input v-model="form.creator" />
      </el-form-item>
      <el-form-item label="图片">
        <el-input v-model="form.url" />
      </el-form-item>
      <el-form-item label="修改人">
        <el-input v-model="form.updator" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">确定</el-button>
        <el-button type="primary" @click="Add"> 取消 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改 -->
  <el-dialog v-model="dialogUpdateVisible" width="500">
    <el-form :model="Updatefrom">
      <el-form-item label="商品名称">
        <el-input v-model="Updatefrom.productName" />
      </el-form-item>
      <el-form-item label="商品批次">
        <el-input v-model="Updatefrom.productionBatch" />
      </el-form-item>
      <el-form-item label="保质期(天)">
        <el-input v-model="Updatefrom.shelfLife" />
      </el-form-item>
      <el-form-item label="生产许可证号">
        <el-input v-model="Updatefrom.licenseNumber" />
      </el-form-item>
      <el-form-item label="生产企业">
        <el-input v-model="Updatefrom.enterprise" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">确定</el-button>
        <el-button type="primary" @click="Update"> 取消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
// import { useUserStore } from '@/stores/user';
import { useCounterStore } from '@/stores/counter';
import axios from 'axios';
import {
  ElMessage,
  type ComponentSize,
  type FormInstance,
  type FormRules
} from 'element-plus';
import { reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessageBox } from 'element-plus';
const useStore = useCounterStore();
const router = useRouter();
const route = useRoute();
const form = reactive({
  productName: '',
  productionBatch: '',
  shelfLife: '',
  licenseNumber: '',
  enterprise: '',
  creator: '',
  updator: '',
  url: ''
});

const dialogFormVisible = ref(false);

const dialogOpenVisible = () => {
  dialogFormVisible.value = true;
};
const Add = () => {
  axios.post('/api/Product/ProductAdd', form).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('添加成功');
    }
  });
};
//修改
const Updatefrom = reactive({
  id: 0,
  productName: '',
  productionBatch: '',
  shelfLife: '',
  licenseNumber: '',
  url: ''
});

const dialogUpdateVisible = ref(false);
// const open = (row: any) => {
//   axios.get('api/Product/ProductFanTian', {}).then((res) => {
//     dialogUpdateVisible.value = true;
//     console.log(res);
//     Updatefrom.productionBatch = res.data.data.productionBatch;
//     Updatefrom.shelfLife = res.data.data.shelfLife;
//     Updatefrom.licenseNumber = res.data.data.licenseNumber;
//     Updatefrom.enterprise = res.data.data.enterprise;
//     Updatefrom.id = row.id;
//   });
// };
const open = (row: any) => {
  
    dialogUpdateVisible.value = true;
    console.log(row);
    Updatefrom.productName=row.productName
    Updatefrom.productionBatch = row.productionBatch;
    Updatefrom.shelfLife = row.shelfLife;
    Updatefrom.licenseNumber = row.licenseNumber;
    Updatefrom.enterprise = row.enterprise;
    Updatefrom.id = row.id;
};

const Update = () => {
  axios.put('/api/Product/ProductUpdate', Updatefrom).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('修改成功');
    }
  });
};
//#region  分页
const tableData = ref([]);
const cha = reactive({
  PageIndex: 1,
  PageSize: 2,
  TotalCount: '',
  TotalPage: ''
});
const xianshi = () => {
  axios
    .get('https://localhost:7063/api/Product/ProductList', {
      params: {
        pageindex: cha.PageIndex,
        pagesize: cha.PageSize
      }
    })
    .then((res) => {
      tableData.value = res.data.data.data;
      console.log(res.data.data.data);
      cha.TotalCount = res.data.data.totalCount;
      cha.TotalPage = res.data.data.totalPage;
    });
};
const handleSizeChange = (val: any) => {
  cha.PageSize = val;
  xianshi();
};
const handleCurrentChange = (val: any) => {
  cha.PageIndex = val;
  xianshi();
};
onMounted(() => {
  xianshi();
});

const shanchu = (row: any) => {
  ElMessageBox.confirm('确定要删除吗?', '确定', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios
      .delete('api/Product/ProductDelete?id=' + row.id, {
        // params:{
        //   id:id
        // }
      })
      .then((res) => {
        if (res.data.code === 200) {
          ElMessage.success('删除成功');
        }
      });
  });
};
</script>

<style></style>
